{% extends 'base.html' %}
{% load staticfiles %}

{% block CSS %}

    <link href="{% static 'css/plugins/datapicker/bootstrap-datepicker.css' %}" type="text/css" rel="stylesheet">

    <link href="{% static "css/plugins/datapicker/datepicker3.css" %}" type="text/css" />
    <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
    <link href="{% static "font-awesome/css/font-awesome.css" %}" rel="stylesheet">
    <link href="{% static "css/animate.css" %}" rel="stylesheet">
    <link href="{% static "css/plugins/codemirror/codemirror.css" %}" rel="stylesheet">
    <link href="{% static "css/plugins/codemirror/ambiance.css" %}" rel="stylesheet">
    <link href="{% static "css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" %}" rel="stylesheet">
    <link href="{% static "css/plugins/chosen/chosen.css" %}" rel="stylesheet">
    <link href="{% static "css/plugins/dropzone/dropzone.css" %}" rel="stylesheet">
    <link href="{% static "css/plugins/jqGrid/ui.jqgrid.css" %}" rel="stylesheet" type="text/css">
    <link href="{% static "css/style.css" %}" rel="stylesheet">

    <script src="{% static "js/jquery-2.1.1.js" %}"></script>
    <script src="{% static "js/bootstrap.min.js" %}"></script>
     <!--日期控件-->
   <!-- <script src="{% static "js/plugins/datapicker/bootstrap-datepicker.js" %}"></script> -->
	<script src="{% static "js/plugins/datapicker/bootstrap-datepicker.min.js" %}" type="text/javascript"></script>
	<script src="{% static "js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js" %}" type="text/javascript"></script>
	<script src="{% static "js/DateCtrl.js" %}" type="text/javascript"></script>

{% endblock %}

{% block contxt %}
     <div class="row  border-bottom white-bg page-heading">
        <div class="col-lg-6" align="left">
             <label for="">日期:  &nbsp;</label>
             <input type="text"  name="start" placeholder="起始日期" id="start-picker" readonly value="{{ sdate }}">
            <span>--</span>
            <input type="text"  name="end" placeholder="结束日期" id="end-picker" readonly value="{{ edate }}">
            <button type="button" class="btn btn-w-m btn-success" id="btnQuery" onclick="btn_query()">查询</button>

        </div>
         <div align="right">
          <form action="/excel_handle/" method="POST" enctype="multipart/form-data">
                 <table width="30%">
                     <tr><td>
                          <div align="left" style="float:left"><input type="file" name="my_file" width="90%"></div>
                 <div align="right"><input type="submit"  class="btn btn-w-m btn-primary"></div>
                     </td></tr>
                 </table>

            </form>
          </div>
    </div>
    <div class="fh-breadcrumb">
        <div class="full-height">
            <div class="full-height-scroll white-bg ">
                <div class="element-detail-box">
                    <div class="ibox-content">
                        <div class="jqGrid_wrapper">
                            <table id="table_list_2">
                            </table>
                            <div id="pager_list_2"></div><!--分页位置-->
                             <table>
                                <tr><td><a href="/{{ url }}/1{{ conf }}">首页</a></td><td>&nbsp;&nbsp;</td>
                                <td><a href="/{{ url }}/{{ current }}{{ conf }}">上一页</a></td><td>&nbsp;&nbsp;</td>
                                <td><a href="/{{ url }}/{{ next }}{{ conf }}">下一页</a></td><td>&nbsp;&nbsp;</td>
                                <td><a href="/{{ url }}/{{ total_page }}{{ conf }}">未页</a></td>
                                <td>&nbsp;&nbsp;</td><td>第【{{ page }}&nbsp;/&nbsp;{{ total_page }}】页</td>
                            </tr></table>
                            <input type="hidden" id="hi_page" value="{{ page }}" />
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block Message %}

	<div id="ycf-alert" class="modal">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
					<h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
				</div>
				<div class="modal-body small">
					<p>[Message]</p>
				</div>
				<div class="modal-footer" >
					<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
					<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block script %}
     <!-- Mainly scripts -->

    <script src="{% static "js/plugins/metisMenu/jquery.metisMenu.js" %}"></script>
    <script src="{% static "js/plugins/slimscroll/jquery.slimscroll.min.js" %}"></script>

    <!-- Custom and plugin javascript -->
    <script src="{% static "js/inspinia.js" %}"></script>
    <script src="{% static "js/plugins/pace/pace.min.js" %}"></script>

    <!-- Peity -->
    <script src="{% static "js/plugins/peity/jquery.peity.min.js" %}"></script>
    <script src="{% static "js/plugins/chosen/chosen.jquery.js" %}"></script>

    <!-- jqGrid -->
    <script src="{% static "js/plugins/jqGrid/grid.locale-en.js" %}"></script>
    <script src="{% static "js/plugins/jqGrid/jquery.jqGrid.min.js" %}"></script>
    <!--
    <script src="{% static "js/plugins/jquery-ui/jquery-ui.min.js"%}"></script>
    -->
    <script src="{% static "js/myjs/mytools.js" %}"></script>

    <script>
        $(document).ready(function () {
            $("#table_list_2").jqGrid({
                url : {{ request_url }},
                datatype : "json",
                height:"auto",
                autowidth: true,
                shrinkToFit: true,
                rowNum: 10,
                sortable:true,
                sortname:'kalf_doco',
                rowList: [10, 25, 35],
                colNames:['序号','订货日期','发货日期', '订单号','交货单号','所属门店','康安原料码','西贝原料码','原料名称','单位','产品分类','预定数量','修改数量','配送数量','收货重量','单价','金额','操作日期'],

                colModel:[
                    {name:'kalf_id',index:'kalf_id', editable: false,width:25, sorttype:"int",search:true},
                    {name:'order_date',index:'order_date', editable: true,width:40, editrules:{required:true},search:true},
                    {name:'ship_date',index:'ship_date', editable: true, width:40,search:true,editrules:{required:true}},
                    {name:'kalf_doco',index:'kalf_doco', editable: true, width:40 },
                    {name:'kalf_doc',index:'kalf_doc', editable: true, width:40 },
                    {name:'xibei_store',index:'xibei_store', editable: true, width:40 },
                    {name:'kalf_code',index:'kalf_code', editable: true, width:40,search:true },
                    {name:'xibei_code',index:'xibei_code', editable: true, width:40,search:true },
                    {name:'kalf_name',index:'kalf_name', editable: true, width:60 },
                    {name:'kalf_unit',index:'kalf_unit', editable: true, width:30,search:true },
                    {name:'kalf_type',index:'kalf_type', editable: true, width:30 },
                    {name:'reserve_num',index:'reserve_num', editable: true, width:30 },
                    {name:'futures_num',index:'futures_num', editable: true, width:30 },
                    {name:'confirm_num',index:'confirm_num', editable: true, width:30 },
                    {name:'receive_num',index:'receive_num', editable: true, width:30 },
                    {name:'kalf_price',index:'kalf_price', editable: true, width:35 },
                    {name:'kalf_amnt',index:'kalf_amnt', editable: true, width:40 },
                    {name:'sys_date',index:'sys_date', editable: true, width:30 }
                ],
                pager: "#pager_list_2",
                viewrecords: true,
                pgbuttons:true,
                loadonce: true,
                add: true,
                edit: true,
                addtext: 'Add',
                edittext: 'Edit',
                hidegrid: false,
                multiselect:true,
                editurl:"#"
            });

            // Setup buttons
            $("#table_list_2").jqGrid('navGrid', '#pager_list_2',
                    {edit: false, add: false, del: false, search: false},
                    {height: 150, reloadAfterSubmit: true}
            );

            // Add responsive to jqGrid
            $(window).bind('resize', function () {
                var width = $('.jqGrid_wrapper').width();

                $('#table_list_2').setGridWidth(width);
            });

            $("#editBtn").click(function(){
                var gr = jQuery("#table_list_2").jqGrid('getGridParam','selrow');

                if( gr != null ) jQuery("#table_list_2").jqGrid('editGridRow',gr,{height:450,
                    onclickSubmit : function(params, posdata) {
                        return {"g_id":$('#table_list_2').jqGrid('getCell', gr, 'g_id')};
                    },
                    closeAfterEdit : true,
                    reloadAfterSubmit:true,
                    afterComplete:function(data,postdata){
                        location.reload()
                    }
                });
                else alert("请选择一条数据");
                var rowData = jQuery("#table_list_2").jqGrid('getRowData',gr);
                //alert(rowData.special_specialtype);

            });
            $("#addBtn").click(function(){
                jQuery("#table_list_2").jqGrid('editGridRow',"new",{height:350,closeAfterAdd : true,reloadAfterSubmit:true,
                    afterComplete:function(data,postdata){
                        location.reload()
                    }});

            });
            $("#delBtn").click(function(){
                var gr = jQuery("#table_list_2").jqGrid('getGridParam','selrow');
                //alert(gr);
                if( gr != null ) jQuery("#table_list_2").jqGrid('delGridRow',gr,{height:120,
                            reloadAfterSubmit:true,

                            onclickSubmit : function(params, posdata) {
                                return {"order_id":$('#table_list_2').jqGrid('getCell', gr, 'order_id')};
                            },
                            afterComplete:function(data,postdata){
                                location.reload()
                            }
                        }
                );
                else alert("请选择一条数据!");
            });
            $("#searBtn").click(function(){
                jQuery("#table_list_2").jqGrid('searchGrid',
                        {sopt:['cn','bw','eq','ne','lt','gt','ew']}
                );
            });
        });

    </script>

<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location.pathname;
        if(url != "/" && url != "/index/"){
            $("li").removeClass("active");
            $("[href*='" + url + "']").parent().parent().parent().addClass("active");
            $("[href*='" + url + "']").parent().parent().addClass("in");
            $("[href*='" + url + "']").parent().addClass("active");
            //alert(url);
        }

        window.Modal = function () {
            var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
            var alr = $("#ycf-alert");
            var ahtml = alr.html();
            //alert(ahtml);

            /* html 复原不在 _init() 里面做了，重复调用时会有问题，直接在 _alert/_confirm 里面做 */
            var _alert = function (options) {
                alr.html(ahtml);	// 复原
                alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
                alr.find('.cancel').hide();
                _dialog(options);

                return {
                    on: function (callback) {
                        if (callback && callback instanceof Function) {
                            alr.find('.ok').click(function () { callback(true) });
                        }
                    }
                };
            };

            var _confirm = function (options) {
                alr.html(ahtml); // 复原
                alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
                alr.find('.cancel').show();
                _dialog(options);

                return {
                    on: function (callback) {
                        if (callback && callback instanceof Function) {
                            alr.find('.ok').click(function () { callback(true) });
                            alr.find('.cancel').click(function () { callback(false) });
                        }
                    }
                };
            };

            var _dialog = function (options) {
                var ops = {
                    msg: "提示内容",
                    title: "操作提示",
                    btnok: "确定",
                    btncl: "取消"
                };

                $.extend(ops, options);

                console.log(alr);

                var html = alr.html().replace(reg, function (node, key) {
                    return {
                        Title: ops.title,
                        Message: ops.msg,
                        BtnOk: ops.btnok,
                        BtnCancel: ops.btncl
                    }[key];
                });

                alr.html(html);
                alr.modal({
                    width: 500,
                    backdrop: 'static'
                });
            }

            return {
                alert: _alert,
                confirm: _confirm
            }

        }();

    })

</script>

{% endblock %}